<template>
  <el-table 
    :data="tableLoadData"
    style="width: 100%">
    <el-table-column label="序号" type="index" fixed="left" width="50" align="center"> </el-table-column>
    <!-- 多选框 -->
    <el-table-column v-if="selection" type="selection" width="55" align="center" ></el-table-column>

    <template v-for="(item, index) in tableHeadConfig">
        <!-- 可以列表筛选，筛选数据filters -->
        <el-table-column
            v-if="item.state == '可筛选'"
            :key="index"
            :prop="item.property"
            :label="item.nameZh"
            :min-width="item.width"
            :align="item.align ? item.align : 'center'"
            :sortable="item.sortable ? true : false"
            :filters="filterObj"
        ></el-table-column>
        <!-- 列内容可以点击跳转页面 -->
        <el-table-column
            v-else-if="item.state == 'router'"
            :key="index"
            :prop="item.property"
            :label="item.nameZh"
            :min-width="item.width"
            :align="item.align ? item.align : 'center'"
            :sortable="item.sortable ? true : false"
        >
            <template slot-scope="scope">
                <el-button type="text" @click="getCompanyInfo(scope.row)" style="width: 100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                    {{scope.row[item.property]}}
                </el-button>
            </template>
        </el-table-column>
        <!-- 列内容做过滤 -->
        <el-table-column
            v-else-if="item.state == 'find'"
            :key="index"
            :prop="item.property"
            :label="item.nameZh"
            :min-width="item.width"
            :align="item.align ? item.align : 'center'"
            :sortable="item.sortable ? true : false"
        >
            <template slot-scope="scope">
                {{ scope.row[item.property] !== '' ? item.selectProperty.find(v => v.value === scope.row[item.property]).label : "" }}
            </template>
        </el-table-column>
        <!-- 列内容做过滤 -->
        <el-table-column
            v-else-if="item.state == 'btn'"
            :key="index"
            :prop="item.property"
            :label="item.nameZh"
            :min-width="item.width"
            :align="item.align ? item.align : 'center'"
            :sortable="item.sortable ? true : false"
        >
            <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-view" @click="toexamine(scope.row)" v-if="scope.row[item.property] !== '' && scope.row[item.property] === '12'">审核</el-button>
                <el-button size="mini" type="text" icon="el-icon-edit" @click="companyInfo(scope.row)">修改</el-button>
                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
        
        <!-- 其它 -->
        <el-table-column
            v-else
            :key="index"
            :prop="item.property"
            :label="item.nameZh"
            :min-width="item.width"
            :align="item.align ? item.align : 'center'"
            :sortable="item.sortable ? true : false"
        ></el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    // 根据表格数据得出的表头筛选多选框数据
    filterObj: {
      type: Array,
      default: () => [],
    },
    // 表头数据
    tableHeadConfig: {
      type: Array,
      default: () => [],
    },
    // 表格数据
    tableLoadData: {
      type: Array,
      default: () => [],
    },


    // 日期选择类型
    dateType: {
      type: String,
      default: "daterange",
    },
    filterSelect: {
      type: Object,
      default: () => {},
    },
    
    // 是否存在多选框,默认不存在
    selection: {
      type: Boolean,
      default: false,
    },
    // 鼠标是否出现行可点击小手样式，默认不出现
    clickStyle: {
      type: Boolean,
      default: false,
    },
    
    // option列表数据
    optionList: {
      type: Object,
      default: () => {},
    },
    // 最大高度
    height: {
      type: Number,
      // default: 0,
    },
    tableName: "",
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      
    };
  },
  created() {
      console.log(this.tableLoadData);
      console.log(Array.from(this.tableLoadData[1]));
  },
  methods: {
    // 提交审核
    toexamine(row, column, event) {
      this.$emit("toexamine", row);
    },
    companyInfo(row, column, event){
        this.$emit("companyInfo", row);
    },
    handleDelete(row, column, event){
        this.$emit("handleDelete", row);
    },
    indexMethod(index) {
      return index * 2;
    },
    // 点击跳转
    getCompanyInfo(row){
        console.log(row,'>>>>>>>>>>>>>>>');
    },
  },
};
</script>